<template>
    <div id="container">
        <div id="linegram" style="height: 360px;"></div>
    </div>
</template>

<script>
    import * as echarts from "echarts";

    export default {
        name: "LineGram",
        mounted() {
            this.initLine()
        },
        methods:{
            initLine(){
                let option = {
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '2%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12', '13', '14']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name:'当前温度',
                            data: [820, 132, 950, 524, 1290, 120, 100,900, 710, 1500, 524, 410, 120, 100],
                            type: 'line',
                            areaStyle: {},
                            markLine : {
                                symbol:"none",               //去掉警戒线最后面的箭头
                                data : [{
                                        silent:true,             //鼠标悬停事件  true没有，false有
                                        lineStyle:{               //警戒线的样式  ，虚实  颜色
                                            type:"solid",
                                            color:"#FA3934",
                                        },
                                        label:{
                                            position:'middle',
                                            formatter:"温度阈值",
                                            fontSize:'16'
                                        },
                                        yAxis:900          // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                                    }
                                ]
                            }
                        },]
                };
                let mychart = echarts.init(document.getElementById('linegram'));
                mychart.setOption(option)
            }
        }
    }
</script>

<style scoped>

</style>
